import React, { useEffect, useState } from 'react'
import { Table, Button, Modal, Tree } from 'antd'
import {
  DeleteOutlined,
  UnorderedListOutlined,
  ExclamationCircleFilled
} from '@ant-design/icons';
import axios from 'axios';


const { confirm } = Modal;
function RoleList() {
  // 用于存储所获取的数据
  const [dataSource, setdataSource] = useState([]);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [rightList, setRightList] = useState([]);
  const [currentRights, setCurrentRights] = useState([]);
  const [currentId, setCurrentId] = useState([]);

  const columns = [{
    title: "ID",
    dataIndex: "id"
  }, {
    title: "角色名称",
    dataIndex: "roleName"
  }, {
    title: "操作",
    render: (item) => {
      return <div>
        <Button
          danger
          shape='circle'
          icon={<DeleteOutlined
            onClick={() => confirmMethod(item)}
          />}></Button>

        <Button
          type='primary'
          shape='circle'
          icon={<UnorderedListOutlined />}
          style={{ margin: "0px 10px" }}
          onClick={() => {
            showModal();
            setCurrentRights(item.rights);
            setCurrentId(item.id);
          }}
        ></Button>

      </div>
    }
  }];

  // 对roles管理员的数据获取
  useEffect(() => {
    axios.get('/roles').then((res) => {
      setdataSource(res.data)
    })
  }, []);

  // 对rights数据的获取
  useEffect(() => {
    axios.get('/rights?_embed=children').then((res) => {
      setRightList(res.data)
    })
  }, []);

  // 给删除按钮绑定点击事件
  const confirmMethod = (item) => {
    confirm({
      title: '你确定要删除?',
      icon: <ExclamationCircleFilled />,
      onOk() {
        deleteMethod(item)
      }
    });
  }
  const deleteMethod = (item) => {
    // 当前页面同步操作 + 后端同步
    setdataSource(dataSource.filter(data => data.id !== item.id))
    axios.delete(`/roles/${item.id}`)
  }

  // 对弹出框进行操作
  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
    setdataSource(dataSource.map(item => {
      if (item.id === currentId) {
        return{
          ...item,
          rights:currentRights
        }
      }
      return item
    }));
    axios.patch(`/roles/${currentId}`,{
      rights:currentRights
    })
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  // 点击check时的事件
  const onCheck = (checkedKeys) => {
    setCurrentRights(checkedKeys.checked);
  }

  return (
    <div>
      <Table
        dataSource={dataSource}
        columns={columns}
        rowKey={item => item.id
        }
        pagination={{
          pageSize: 5
        }}
      >
      </Table>

      <Modal title="权限分配" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
        <Tree
          checkable
          checkedKeys={currentRights} //根据数据中的key值默认选中该key所对应的选项
          onCheck={onCheck} //点击事件
          treeData={rightList} //所需要的数据
          checkStrictly={true} //取消关联（当选中父选项时子选项会全部默认选中，这一属性就是为了取消这一关联）
        />
      </Modal>
    </div>
  )
}

export default RoleList
